<!--
 * @Author: XXX
 * @Date: 2022-01-05 08:34:45
 * @LastEditTime: 2022-01-06 19:53:40
 * @LastEditors: XX
 * @Description: 
 * @FilePath: \am-dashboard\src\pages\government\components\Left3.vue
 * 别乱动！
-->

<template>
  <div id="Bottom-1" style="height: 95%"></div>
</template>
<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },

  methods: {
    //3. 初始化图表
    initChart() {
      const data = [
        { type: "山西农大主体育场工程", number: 1 },
        { type: "太原理工大教学楼工程", number: 2 },
        { type: "中北大学", number: 0 },
      ];
      const plot = new Column("Bottom-1", {
        width: 300,
        height: 200,
        autoFit: false,
        // appendPadding: 0,
        data,
        yField: "number",
        xField: "type",
        xAxis: {
          label: {
            autoHide: false,
            autoEllipsis: true,
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },

        label: false,
      });

      plot.render();
    },
  },

  mounted() {
    this.initChart();
  },
};
</script>